<template>
    <transition :name="dateOpen" mode="out-in">
        <component :is="comState" class="flex"></component>
    </transition>
</template>
<script setup>
import CloseDateCom from './Close.vue';
import OpenDateCom from './Open.vue';
import { ref, provide, computed } from 'vue';

const dateOpen = ref("close")
const state = ref("close")
function updateDateState() {
    state.value = state.value == "close" ? 'open' : "close";
    // if (state.value == "close") {
    //     dateOpen.value = "close";
    // }
    // else if (state.value == "open") {
    //     dateOpen.value = "open";
    // }
}

const comState = computed(() => {
    if (state.value == "close") {
        dateOpen.value = "close";
        return CloseDateCom;
    }
    else if (state.value == "open") {
        dateOpen.value = "open";
        return OpenDateCom;
    }
});

provide('DateState', {
    state,
    updateDateState
})
</script>

<style lang="scss" scoped>

.flex {
    flex: 0 0 auto;
    // position: sticky;
    // top: 20px;
    width: auto;
}

.open-enter-active {
    animation-name: date-open;
    animation-duration: .3s;
    animation-timing-function: linear;
}

.open-leave-active {
    animation: date-open .3s reverse;
}

@keyframes date-open {
    0% {
        height: 118px;
    }

    100% {
        height: 500px;
    }
}
</style>